<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css"/>
		<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="ExtJS/ext-all.js"></script>
		<script type="text/javascript">
			Ext.onReady(function() {
				var height = window.document.body.clientHeight;
			    var width = window.document.body.clientWidth;
			    var cp = new Ext.state.CookieProvider();

			    Ext.form.Validate = Ext.extend(Ext.BoxComponent, {
			        onRender : function(ct, position){  
			            if(!this.el){   
			                this.el=document.createElement('img');               
			                this.el.src=this.src;
			                this.el.style.cursor='hand';
			                this.el.onclick= function(){
			                  this.src=this.src+"?"+Math.random();
			                }
			                this.el.title = '看不清?点击换一个';
			                if(this.forId){   
			                    this.el.setAttribute('htmlFor', this.forId);   
			                }
			            }
			            Ext.form.Label.superclass.onRender.call(this, ct, position);
			        }
			    });
			    Ext.reg('validate', Ext.form.Validate); 
				
				var loginForm = new Ext.form.FormPanel({
					title:'登录',
					frame: true,
					floating: true,
					labelAlign: 'right',
					width: 300,
					height: 180,
					items: [
						 { xtype: 'textfield', name: 'userName', fieldLabel: '用户名', allowBlank : false, anchor : '95%'},
						 { xtype: 'textfield', inputType:'password',  name: 'userPassword', fieldLabel: '密&nbsp;&nbsp;&nbsp;码', allowBlank : false, anchor : '95%'},
						 {
					        layout:"column",      //用列模式(一行两列布局)
					        defaults:{
					          layout:"form",
					          columnWidth:0.5
					        },
					      items:[{
					            defaults:{
					                anchor:"100%"
					            },
					            items:[{
					              xtype:"textfield",  
					              name: 'validateCode',
					              fieldLabel:"验证码"
					          }]
					        },{
					              items:[{
					                    xtype:"validate",  //验证码图片
					                    src:"Validate.jsp"  //生成验证码图片地址
					              }]
					          }]
					    },
					    new Ext.form.Checkbox({
							id: 'saveNameChk',
							inputValue: 1,
							boxLabel: '记住用户名'
						})
					],
					buttons: [
						{
							text: '登录',
							id: 'loginBtn',
							width: 70,
							handler: function(btn) {
								doLogin();
							}
						},
						{
							text: '重置',
							handler: function() {
								loginForm.getForm().reset();
							}
						}
					],
					keys:[
						{
							key: [13],
							fn: doLogin	
						}
					]
				});
				
				loginForm.setPosition((width - loginForm.width) /2, (height - loginForm.height) / 2);
				loginForm.render('center-div');

				function doLogin() {
					if(!loginForm.getForm().isValid())
						return;

					Ext.getCmp('loginBtn').disable();
					loginForm.form.doAction('submit', {
						url: './basic/LoginAction/login.action',
						method: 'post',
						waitTitle:'请等待',
						waitMsg: '正在登录...',
						params: '',
						success: function(form, action) {
							if(action.result.result == 'success') {
								if(Ext.getCmp('saveNameChk').checked) {
									cp.set("EWebUserName", form.findField("userName").getValue());
								}
								else {
									cp.clear("EWebUserName");
								}
								window.location.href = 'desktop.html';
							}
							else if(action.result.result == 'fail') {
								alert(action.result.info);
							}
							else {
								Ext.MessageBox.alert('提示', '用户名或者密码错误', function() {
									window.location.href = 'login.html';
								});
							}
						}
					});
				}

				var cpUsername = cp.get("EWebUserName");
				if(cpUsername != null && cpUsername != '') {
					loginForm.form.findField("userName").setValue(cpUsername);
					Ext.getCmp('saveNameChk').setValue(1);
					Ext.getCmp('saveNameChk').el.dom.checked = true;
				}
			});
		</script>
	</head>
	<body style="background-color:#CCCCCC;">
		<div id="center-div"></div>
	</body>
</html>